<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">

</head>
<body>


<!--style="display: none;"-->
<div id="search" class="layui-hide" style="background-color: #4ad3fe;height: 120px;">
    <div style="position: relative;top: 20px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline" style="height: 50px">
                    <label class="layui-form-label">用户名:</label>
                    <div class="layui-input-block" style="width: 200px;height: 30px">
                        <input type="text" name="username" id="uname" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="height: 50px">
                    <label class="layui-form-label">用户电话:</label>
                    <div class="layui-input-block" style="width: 200px;height: 30px">
                        <input type="text" name="telnumber" id="telphone" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="width: 200px;height: 30px">
                    <label class="layui-form-label">VIP类型:</label>
                    <div class="layui-input-block" style="width: 200px;height: 30px">
                        <input type="text" name="vname" id="vip2" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">VIP到期时间:</label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="startDate" placeholder="开始时间" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">--</div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="endDate" placeholder="结束时间" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="height: 50px">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" onclick="query()" id="query1">查找</button>
                        <button type="button" class="layui-btn layui-btn-sm" onclick="closeSearch()">收起</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>


<div id="open1" style="display: none;position: absolute;top: 20px;left: 30px">
    <div>
        <form class="layui-form" id="addEmployeeForm">
            <div class="layui-form-item">
                <label class="layui-form-label">用户电话:</label>
                <div class="layui-input-block" style="width: 300px">
                    <input type="text" name="telnumber" class="layui-input" required lay-verify="required|phone"
                           id="phone" onblur="check3()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">VIP类型:</label>
                <div class="layui-input-block" style="width: 300px">
                    <input type="text" name="vname" id="vip" class="layui-input" required lay-verify="required"
                           onblur="check1()" placeholder="请输入vip类型">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开始日期</label>
                <div class="layui-input-block" style="width: 300px">
                    <input type="text" name="startDate" id="start" class="layui-input" onblur="check2()"
                           placeholder="yyyy-MM-dd HH:mm:ss">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="addtest()" id="testadd">确认添加
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>&nbsp;&nbsp;
        <button class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline="javascript">
    var url = [[@{
        /}]]
</script>


<script th:inline="none">
    //日期格式化
    Date.prototype.format = function (format) {
        var date = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S+": this.getMilliseconds()
        };
        if (/(y+)/i.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in date) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1
                    ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
            }
        }
        return format;
    }


    var layer = layui.layer;
    var param1 = false;
    var param2 = false;
    var param3 = false;

    function check1() {
        var a = $("#vip").val();
        if (a == null | a == '') {
            layer.msg("vip类型不能为空")
        } else {
            param1 = true;
        }

    }

    function check2() {
        /*var a = $("#start").val();
        if (a == null | a == '') {
            layer.msg("开通时间不能为空")
        } else {
            param2 = true;
        }*/

    }

    function check3() {
        var a = $("#phone").val();
        if (a == null | a == '') {
            layer.msg("不能为空")
        } else if (!(/^1[3456789]\d{9}$/.test(a))) {
            layer.msg("请输入手机号")
        } else {
            param3 = true;
        }


    }

    //隐藏搜索框
    function closeSearch() {
        $("#search").addClass('layui-hide');
    }


    //搜索
    function query() {
        //var startDate = new Date($("#startDate").val()).format('yyyy-MM-dd hh:mm:ss');
        //var endDate = new Date($("#endDate").val()).format('yyyy-MM-dd hh:mm:ss');
        var params={
            'username':$("#uname").val(),
            'telnumber':$("#telphone").val(),
            'vname':$("#vip2").val(),
            'startDate':$("#startDate").val(),
            'endDate':$("#endDate").val()

        }

        var table = layui.table;
        table.reload('table1', {
            url: url+'vip/allVipInfo'
            ,where: params //设定异步数据接口的额外参数
        })

    }

    function addtest() {
        var layer = layui.layer;
        var table = layui.table;
        alert('add');
        if (param2 & param1 & param3) {
            $.ajax({
                url: url + 'vip/addVip',
                type: 'post',
                data: {'telnumber': $("#phone").val(), 'vname': $("#vip").val(), 'startDate': $("#start").val()},
                success: function (data) {
                    layer.msg(data)
                    table.reload('table1', {
                        url: url + 'vip/allVipInfo'
                    });
                }
            })
            layer.closeAll();
        }
    }

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#start'
            , type: 'datetime'
            , trigger: 'click'
        });
        laydate.render({
            elem: '#startDate'
            , type: 'datetime'
            , trigger: 'click'
        });
        laydate.render({
            elem: '#endDate'
            , type: 'datetime'
            , trigger: 'click'
        });
    })
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: url + 'vip/allVipInfo'
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , limit: 2
            , id: 'table1'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'username', title: '用户名', width: 120, edit: 'text'}
                , {field: 'telnumber', title: '用户电话', width: 160}
                , {field: 'vname', title: 'VIP等级', width: 120}
                , {field: 'startDate', title: '开始时间', width: 240, sort: true}
                , {field: 'endDate', title: '到期时间', width: 240, sort: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
        });


        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                case 'add':
                    layer.open({
                        type: 1,
                        title: '添加VIP用户',
                        closeBtn: 2 // 是否显示关闭按钮
                        , anim: 1 //动画类型
                        , icon: 6 // icon
                        , skin: 'layui-layer-lan'
                        , area: ["40%", "50%"]
                        , content: $("#open1")
                    });
                    break;
                case 'search':
                    //$("#search").prop('style.display','block');
                    $("#search").removeClass('layui-hide');
                    /*var select = $("#vip2");
                    $.ajax({
                        url:url+'vip/showVip',
                        type:'get',
                        async:false,
                        success:function (data) {
                            //alert(data[0].vname);

                            for (var i = 0; i <data.length; i++) {
                                var option = $("<option></option>").append(data[i].vname);
                                option.attr("value",data[i].id);
                                select.append(option);
                            }
                        }
                    })*/
                    break;
            }
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('确认删除吗？', function (index) {
                    obj.del();
                    $.ajax({//删除用户的请求
                        url: url + "vip/deleteSingle",
                        data: {"id": data.id},
                        success: function (resultDate) {
                            //  layer.msg("提示信息",resultDate);
                            if (resultDate == "success") {
                                layer.msg('删除成功')
                                table.reload('table1', {
                                    url: url + 'vip/allVipInfo'
                                });
                            } else {
                                layer.msg('删除成功')
                            }
                        }
                    })
                    layer.close(index);
                })

            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            } else if (obj.event === '') {


            }
        });
    });
    /*var layer = layui.layer;
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:url+'vip/addVip',
                type:'post',
                data:{'telnumber':$("#phone").val(),'vipId':$("#vip").val(),'startDate':$("#start").val()},
                success:function (data) {
                    layer.msg(data);
                }
            })
            return false;
            layer.closeAll();
        });

    });*/
</script>

</body>
</html>